import React, { Component } from 'react';
import { Button, Form, message, Input, Spin } from 'antd';
import { messages } from 'share/common';
import SingleLinkComp from 'containers/data-center/report/universal-report/components/custom-export-setting/single-link-comp';
const FormItem = Form.Item;
import 'styles/data-center/report/universal-report/custom-export-setting.scss';
import CustomExportSettingService from 'containers/data-center/report/universal-report/components/custom-export-setting/custom-export-setting.service';

@Form.create()

class CustomExportSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      spinning: false,
      data: {
        settingName: '',
        reportColumnExportSettingDetails: []
      },
      allData: undefined,
      loading: false,
    };
  }

  componentWillMount() {

  }

  getData = () => {
    this.setState({spinning: true})
    CustomExportSettingService.getLinkableData().then((res)=>{
      this.setState({allData: res.data, spinning: false});
    }).catch(()=>{this.setState({spinning: false})})
  }

  componentDidMount() {
    this.getData();
    const { params } = this.props;
    if (params.id && params.id !== 'new') {
      this.setState({loading: true})
      CustomExportSettingService.getExportSettingDetail(params.id).then((res)=>{
        this.setState({
          data: res.data,
          loading: false
        })
      }).catch(()=>{this.setState({loading: false})})
    } else {
      const { data } = this.state;
      data.reportColumnExportSettingDetails.push({uniqueId: '000000001', masterColumnId: '', basicInfoReportId: '', reportColumnExportSettingBody: []})
      this.setState({data})
    }
  }

  saveAll = (e) => {
    e.preventDefault();
    const { params } = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (this.SingleLinkCompRef.validateFields()) {
          this.setState({loading: true})
          values.reportId = this.props.params.reportId;
          if (params.id && params.id !== 'new')
            values.id = params.id
          CustomExportSettingService.newOrUpdateExportSetting(values).then((res)=>{
            message.success(messages('finance-7.key339')/*保存成功*/);
            this.setState({loading: false})
            this.props.close();
          }).catch(()=>{this.setState({loading: false})})
        }
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, data, spinning, allData } = this.state;

    return (
      <div className='custom-export-setting'>
        <Form className='new-form' onSubmit={this.saveAll}>
          <Spin spinning={spinning}>
            <FormItem required label={messages('finance-7.key340')/*设置名称*/}>
              {getFieldDecorator('settingName', {
                initialValue: data.settingName,
                rules: [
                  {
                    max: 100,
                    message: messages('common.max.characters.length',{arg1: 100})/*最多输入{arg1}个字符*/
                  }
                ]
              })(
                <Input placeholder={messages('finance-7.key341')/*请输入名称*/} />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator("reportColumnExportSettingDetails", {
                initialValue: data.reportColumnExportSettingDetails || []
              })(
                <SingleLinkComp allData={allData || []} onRef={ref=> this.SingleLinkCompRef = ref} />
              )}
            </FormItem>
          </Spin>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={loading}>
              {messages('common.save')/*保存*/}
            </Button>
            <Button onClick={() => {
              this.props.close({needRefresh: false});
            }}>
              {messages('common.cancel')/*取消*/}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

CustomExportSetting.propTypes = {};

export default CustomExportSetting;
